﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<HEAD>
    <TITLE>bootstrap风格的zTree树形菜单</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="/plugins/bootstrap-ztree/css/bootstrapStyle/bootstrapStyle.css" type="text/css">

    <script type="text/javascript" src="/plugins/bootstrap-ztree/js/jquery.min.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap-ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap-ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap-ztree/js/jquery.ztree.exedit.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            check: {
                enable: true
            },
            data: {
                key:{
                    name:'moduleName'
                },
                simpleData: {
                    enable: true,
                    idKey: "moduleCode",
                    pIdKey: "parentModule"
                }
            }
        };

        $(document).ready(function () {
            //通过jquery的异步请求，来获取菜单的动态数据
            $.get("/login/index", function (data) {
                $.fn.zTree.init($("#treeDemo"), setting, data);
            });

            $("#clickBtn").click(function () {
                //获取树型选中的所有节点的id
                var array = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes(true);
                var ids = [];
                for (var i = 0; i < array.length; i++) {
                    ids.push(array[i].id);
                }
                alert(ids);
            });

        });

        //-->
    </SCRIPT>
</HEAD>

<body>
<button type="button" id="clickBtn">获取选择的所有树型节点</button>
<br/>
<ul id="treeDemo" class="ztree"></ul>


</BODY>
</HTML>